<template>
  <div>
    <div>
      <a-row ref="container" :gutter="20" :style="bgImg">
        <a-col :span="24" style="height: 80px">
          <div id="bannerContainer">
            <span> AKTICP动态实时监测图表</span>
          </div>
          <div>
            <hr style="height: 1px; border: none; border-top: 4px solid #3151ad" />
          </div>
        </a-col>

        <a-col style="height: calc(100vh - 196px)">
          <a-col :span="16" style="height: calc(100vh - 200px)">
            <div class="statusContainer">
              <div class="statusContainerB">
                <div :style="statusImg" class="statusImgContainer">
                  <div>
                    <img :src="normalSrc" class="statusImg" alt />
                    <div style="color: #3afa50; text-align: center">运行</div>
                  </div>
                  <div>
                    <img :src="normalstopSrc" class="statusImg" alt />
                    <div style="color: blue; text-align: center">停机</div>
                  </div>
                  <!-- <div>
                    <img :src="warningSrc" class="statusImg" alt />
                    <div style="color: #3afa50; text-align: center">警告</div>
                  </div> -->
                  <div>
                    <img :src="errorSrc" class="statusImg" alt />
                    <div style="color: #ff2f2f; text-align: center">异常</div>
                  </div>
                  <div>
                    <img :src="stopSrc" class="statusImg" alt />
                    <div style="color: #7e7e7e; text-align: center">脱机</div>
                  </div>
                </div>
                <div :style="switchImg" class="switchImg">
                  <div style="padding: 10px 0; text-align: center">排&nbsp;水&nbsp;控&nbsp;制&nbsp;开&nbsp;关</div>
                  <div>
                    <span style="font-size: 12px; color: #ff4949">(关)</span>
                    <a-switch
                      v-model="switchValue"
                      active-color="#13ce66"
                      @input="closeOpenSwitch"
                      inactive-color="#ff4949"
                    ></a-switch>
                    <span style="font-size: 12px; color: #13ce66">(开)</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="variableContainer" style="height: calc(100% - 120px); width: 100%">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div style="display: flex; flex-wrap: wrap; height: 100%; overflow: scroll; padding-top: 10px">
                <div id="chartLine" style="width: 100%; height: 100%"></div>
              </div>
            </div>
          </a-col>

          <a-col :span="8" style="height: 100%; padding-top: 20px">
            <div id="test">
              <div style="color: white; font-size: 16px; padding-left: 200px; padding-bottom: 10px">
                <span>出水口水质监测</span>
              </div>
              <a-table
                size="small"                
                :rowKey="(record, index) => {return index;}"
                :rowClassName="tableRowClass"
                :columns="columns"
                :dataSource="dataSource"
                height="500"
                :pagination="false"

              >
                <!-- <a-table-column
              type="selection"
              width="55">
              </a-table-column> -->
                <!-- <a-table-column label="序号" width="50">
                  <template slot-scope="scope"
                    >{{ scope.$index + 1 > 9 ? scope.$index + 1 : '0' + (scope.$index + 1) }}
                  </template>
                </a-table-column>
                <a-table-column label="监测项目" prop="monitorProject"> </a-table-column>
                <a-table-column label="排放标准" prop="standard" :render-header="renderHeader"> </a-table-column>
                <a-table-column label="单位" prop="unit"> </a-table-column>
                <a-table-column label="实时排放数据" prop="realtimeData"> </a-table-column> -->
              </a-table>
              <div style="color: red; font-size: 16px; padding-top: 20px">
                <span>排放时间：{{ realCreateTime }}</span>
              </div>
            </div>
          </a-col>
        </a-col>
      </a-row>
    </div>
    <!-- <a-dialog title="环保资料查看" :visible.sync="dialogPdfviewVisible" :modal-append-to-body="false">
      <pdfview :infoId="this.inforId" ref="pdfView" />
    </a-dialog> -->
  </div>
</template>
<script>
import '@/assets/less/TableExpand.less'

export default {
  props: {
    mapRefresh:{
      type: String,
    },
    clientId: {
      type: String,
    },
    equipmentId: {
      type: String,
    },
    inforId: {
      type: String,
    },
  },
  name: 'EquipmentRuningBigscreen',
  mixins: [],
  components: {},
  data() {
    return {
      description: '设备运行大数据页面',
      normalSrc: require('@/assets/map/normal.png'),
      normalstopSrc: require('@/assets/map/normalstop.png'),
      warningSrc: require('@/assets/map/warning.png'),
      stopSrc: require('@/assets/map/stop.png'),
      errorSrc: require('@/assets/map/error.png'),
      bannerSrc: require('@/assets/map/banner.png'),
      bgImg: {
        backgroundImage: 'url(' + require('@/assets/map/bg2.jpg') + ')',
        height: '100vh',
        backgroundSize: '100% 100%',
        padding: '0 20px',
        // backgroundRepeat: "no-repeat"
      },
      statusImg: {
        backgroundImage: 'url(' + require('@/assets/map/statusbg.png') + ')',
        display: 'flex',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        justifyContent: 'space-around',
      },
      switchImg: {
        backgroundImage: 'url(' + require('@/assets/map/switchbg.png') + ')',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        justifyContent: 'center',
        textAlign: 'center',
      },
      trendsImg: {
        backgroundImage: 'url(' + require('@/assets/map/trends.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 140%',
        backgroundPosition: '0 -20px',
        overflow: 'scroll',
        height: 'calc(100% - 30px)',
      },
      itemImg: {
        backgroundImage: 'url(' + require('@/assets/map/trendsitem.png') + ')',
        width: '30%',
        height: '70px',
        padding: '15px 0',
        backgroundSize: '100% 100%',
        textAlign: 'center',
        alignContent: 'center',
        boxShadow: '0px 0px 8px 1px rgba(25,54,98,0.97)',
      },
      equipmentImgB: {
        width: '50%',
        backgroundPosition: 'center',
        backgroundImage: 'url(' + require('@/assets/map/equipmentB.png') + ')',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        marginRight: '15px',
      },
      alarmImg: {
        backgroundImage: 'url(' + require('@/assets/map/alarmbg.png') + ')',
        backgroundRepeat: 'no-repeat',
        marginTop: '20px',
        padding: '10px',
        color: 'rgba(254, 1, 1, 1)',
      },
      alarmItemBG: {
        backgroundImage: 'url(' + require('@/assets/map/alarmitem.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      orange: {
        background: 'orange',
        color: '#fff',
      },
      equipmentImg: require('@/assets/map/equipment.png'),
      switchValue: true,
      parameterData: [],
      alarmDataA: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
      alarmDataB: [{}, {}, {}, {}, {}, {}],
      alarmDataC: [{}, {}, {}, {}, {}, {}],
      listQuery: {
        current: 1,
        size: 100,
      },
      reflashData: null,
      timerFlag: true,
      isCreatePie: false,
      dialogPdfviewVisible: false,
      outData: {},
      inData: {},
      chartList: [],
      chartPh: {},
      chartCod: {},
      chartBod: {},
      chartSs: {},
      chartAd: {},
      chartZd: {},
      optionsPh: {},
      optionsCod: {},
      optionsBod: {},
      optionsSs: {},
      optionsAd: {},
      optionsZd: {},
      timer: [],
      testList: [],
      paraData: [],
      realCreateTime: '2023-11-27 08:09:33',
      chartData: [],
      countArrList: [],
      itemKey: Math.random(),
      dataSource: [
        { monitorProject: '生化需氧量BOD5', standard: '0-200', unit: 'O2，mg/L', realtimeData: '17.26' },
        { monitorProject: '悬浮物SS', standard: '16-20', unit: 'mg/L', realtimeData: '17.28' },
        { monitorProject: '总磷', standard: '1.1-1.5', unit: 'mg/L', realtimeData: '1.3' },
        { monitorProject: '总氮', standard: '16-20', unit: 'mg/L', realtimeData: '17.27' },
        { monitorProject: '氨氮', standard: '8-16', unit: 'mg/L', realtimeData: '13.02' },
        { monitorProject: '色度', standard: '25-30', unit: '度', realtimeData: '26.01' },
        { monitorProject: '动植物油', standard: '2.5-3.0', unit: 'mg/L', realtimeData: '2.59' },
        // {monitorProject:'石油类',standard:'2.5-3.0',unit:'mg/L',realtimeData:'2.57'},
        // {monitorProject:'电导率',standard:'125-1250',unit:'uS/cm',realtimeData:'1085.03'},
      ],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 10,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '监测项目',
          dataIndex: 'monitorProject',
          key: 'monitorProject',
          width: 100,
        },
        {
          title: '排放标准',
          dataIndex: 'standard',
          key: 'standard',
          width: 100,
        },
        {
          title: '单位',
          dataIndex: 'unit',
          key: 'unit',
          width: 100,
        },
        {
          title: '实时排放数据',
          dataIndex: 'realtimeData',
          key: 'realtimeData',
          width: 90,
        },
      ],
    }
  },
  created() {},
  computed: {},
  mounted() {
    this.getLineCharts()
  },
  updated(){
    this.getLineCharts()
  },
  watch: {
    deep: true,
    immediate: true,
    mapRefresh: {
      handler: function (nval, oval) {
         this.getLineCharts()
         console.log(this.mapRefresh)
      },
    },
  },
  methods: {
    open() {
      this.getLineCharts()
    },
    tableRowClass(record, index) {
      //   if(this.defaultTable != "household_evaluative"){
      //     if(record.householdStatus != 2 && this.numType == 1 && record.householdStatus != 7){
      //       return "rowClass";
      //     }
      //   }
      return 'row-color'
    },
    closeOpenSwitch() {
      if (this.switchValue) {
        this.openCommand()
      } else {
        this.closeCommand()
      }
    },
    closeCommand() {
      let that = this
      var data = {
        isOpen: false,
        installationInforIds: this.inforId,
      }
      openAndClose(data).then((response) => {
        that.$notify({
          title: '提示',
          message: '命令已发送',
        })
      })
    },
    openCommand() {
      let that = this
      var data = {
        isOpen: true,
        installationInforIds: this.inforId,
      }
      openAndClose(data).then((response) => {
        that.$notify({
          title: '提示',
          message: '命令已发送',
        })
      })
    },
    renderHeader(h, column) {
      return h(
        'span',
        {
          style: `cursor: pointer;`,
          on: {
            click: this.pdfview,
          },
        },
        '排放标准'
      )
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(rowIndex)
      let cellStyle
      cellStyle = 'background: green;color:white'
      // return cellStyle
      if (row.overStandard && row.overStandard == 1) {
        return {
          color: 'red',
          fontSize: '0.9',
          background: '#050811;',
        }
      } else return cellStyle
    },
    getLineCharts() {
      debugger
      let chartBox = this.$echarts.init(document.getElementById('chartLine'))
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        title: {
          show: true,
          text: '实时排放数据图',
          textStyle: {
            color: 'white', //'red'，字体颜色
            fontStyle: 'normal', //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: 'normal', //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: 'sans-serif', //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 18, //字体大小
            lineHeight: 18, //字体行高
          },
          textAlign: 'auto', //整体（包括 text 和 subtext）的水平对齐
          textVerticalAlign: 'auto', //整体（包括 text 和 subtext）的垂直对齐
          padding: 10, //[5,10] | [ 5,6, 7, 8] ,标题内边距
          left: '42%', //'5' | '5%'，title 组件离容器左侧的距离
          // right:'auto',//'title 组件离容器右侧的距离
          // top:'auto',//title 组件离容器上侧的距离
          // bottom:'auto',//title 组件离容器下侧的距离
        },
        // legend: {
        //     textStyle: {            //图例文字属性设置
        //           color: '#ffffff',
        //           fontFamily: 'Microsoft YaHei',
        //           fontSize: '8'
        //     },
        //     // data:['PH','电导率','COD','氨氮','总氮','总磷']
        //     data:['水量'],
        //     left:'5%',
        // },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#ccc', // x轴的颜色
              },
            },
            name: '最近排放次数', //x轴名称
            nameLocation: 'middle', //x坐标轴名称的位置
            nameTextStyle: {
              //x坐标轴名称的字体样式
              color: 'white',
              fontSize: 16,
              padding: 20,
            },

            data: createTime(),
            // data : this.chartData
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#ccc', // 折线的颜色
              },
            },
            name: '每次排放数量(升)',
            nameRotate: '90',
            nameLocation: 'center',
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              color: 'white',
              fontSize: 16,
              padding: 30,
            },
          },
        ],
        series: [
          {
            name: '排水量',
            type: 'line',
            stack: '总量',
            lineStyle: {
              normal: {
                color: 'green',
              },
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' },
                // {
                //   coord: [5, 2],
                //   symbol: "rect",
                //   // symbol: 'image://' + require('../../assets/images/blue.png'),
                //   symbolSize: 20,
                //   value: 'X',
                //   animation: true,
                //   label: {
                //     show: true,
                //     color: '#f00'
                //   },
                //   itemStyle: { color:'#faa' }
                // }
              ],
            },
            data:createData()
            // data: this.chartData,
          },
          // {
          //     name:'电导率',
          //     type:'line',
          //     stack: '总量',
          //     data:[220, 182, 191, 234, 290, 330, 310]
          // },
          // {
          //     name:'COD',
          //     type:'line',
          //     stack: '总量',
          //     data:[150, 232, 201, 154, 190, 330, 410]
          // },
          // {
          //     name:'氨氮',
          //     type:'line',
          //     stack: '总量',
          //     data:[320, 332, 301, 334, 390, 330, 320]
          // },
          // {
          //     name:'总氮',
          //     type:'line',
          //     stack: '总量',
          //     data:[820, 932, 901, 934, 1290, 1330, 1320]
          // },
          // {
          //     name:'总磷',
          //     type:'line',
          //     stack: '总量',
          //     data:[820, 932, 901, 934, 1390, 1430, 1320]
          // }
        ],
      }
      let that = this
      function createTime() {
        let time = new Date().getTime()
        let arr = []
        let total = 30
        for (let i = 1; i <= total; i++) {
          // arr.push(parseTime(time - i*10*1000))
          arr.push(i)
        }
        // arr.reverse()
        return arr
      }
      function createData() {
        let arr = []
        let total = 30
        for (let i = 1; i <= total; i++) {
          let num = Math.random() * 5000

          arr.push(num.toFixed(2))
        }
        return arr
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function () {
        chartBox.resize()
      })
    },
    getCharts() {
      const chartBox = this.$echarts.init(document.getElementById('barLine'))
      const option = {
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25],
          },
        ],
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function () {
        chartBox.resize()
      })
    },
  },
}
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: rgba(74, 97, 204, 1);
}
#bannerContainer {
  display: flex;
  justify-content: center;
  span {
    font-size: 26px;
    font-family: PingFang SC;
    color: rgba(255, 255, 255, 1);
    padding-top: 20px;
  }
}
.rowClass {
  color: white;
}
/deep/ .row-color {
    color: white;
    background-color: rgb(20, 17, 17);
}
  /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
      background-color: #9ad86a;
    }
   /deep/  .ant-table-body .ant-table-row-hover{
      background: #9ad86a;
    }
    /deep/ .ant-table-body .ant-table-row-hover>td{
      background: #9ad86a;
    }
   /deep/ .ant-table.ant-table-small {
  border: none;
}
// /deep/.ant-table.ant-table-small .ant-table-tbody > tr > td {
//   border: none;
// }
    
// /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar {
//  border: none;
// }
.line-wrap {
  width: 50%;
  height: 10px;
}
.statusTitle {
  display: flex;
  padding-bottom: 5px;
  i {
    height: 16px;
    width: 2px;

    background: rgba(109, 142, 226, 1);
  }
  span {
    width: 120px;
    height: 16px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    padding-left: 5px;
  }
}
.statusTitleLine {
  display: flex;
  i {
    width: 8px;
    height: 1px;
    background: rgba(109, 142, 226, 1);
    margin-left: 5px;
  }
}
.statusContainer {
  .statusContainerB {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    height: 140px;
    width: 60%;
    .statusImgContainer {
      width: 60%;
      padding: 20px;
      .statusImg {
        width: 30px;
        height: 30px;
      }
    }
  }
  .switchImg {
    width: 38%;
    padding: 20px;
    color: #fff;
    font-size: 16px;
  }
}
#trendsList {
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: space-around;
  padding: 20px 10px 0;
  flex-wrap: wrap;
}
.variableName {
  color: #fff;
}
.variableValue {
  color: #fff;
}
.variableContainer {
  .variableName {
    font-size: 12px;
    font-family: PingFang;
    font-weight: bold;
    color: #fff;
    padding-bottom: 5px;
  }
  .variableValue {
    font-size: 24px;
    font-family: DigifaceWide;
    font-weight: 400;
    color: #fff;
  }
}
.alarmContainer {
  .alarmPanelA {
    display: flex;
    text-align: center;
    height: 195px;
    .alarmTitleA {
      width: 25%;
      background: rgba(17, 30, 55, 1);
      line-height: 195px;
      color: #fff;
      font-size: 16px;
    }
  }
  .alarmPanelB {
    display: flex;
    text-align: center;
    height: 130px;
    .alarmTitleB {
      width: 25%;
      background: rgba(17, 30, 55, 1);
      line-height: 130px;
      color: #fff;
      font-size: 16px;
    }
  }
  .alarmItemContainer {
    width: 75%;
    display: flex;
    flex-wrap: wrap;
  }
  .alarmItem {
    width: 33%;
    text-align: center;
    border-bottom: 1px solid rgba(28, 46, 62, 1);
    border-right: 1px solid rgba(28, 46, 62, 1);
    height: 65px;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .alarmItemName {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      margin-bottom: 4px;
    }
    .alarmItemValue {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
.data-header {
  background: #11396e;
  font-size: 32px;
  text-align: center;
  color: #fff;
  padding: 10px;
}
.data-body {
  display: flex;
  flex-wrap: wrap;
  .data-body-container {
    width: 100px;
    height: 60px;
    background: #11396e;
    color: #fff;
    text-align: center;
    margin: 5px 5px 0 0;
    padding: 10px;
    .data-body-title {
      padding-bottom: 10px;
      height: 25px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .data-body-value {
      font-size: 16px;
      color: #ccc;
    }
  }
}
</style>